/*
 * Copyright Thoughtworks, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
@import "../../global/common";

$build-details-z-index: 2;
$building-bg-color: #ffeda0;
$enable-count-bg-color: #50e3c2;
$disable-count-bg-color: #ee6161;
$disabled-text-color: #999;
$icon-hover-color: #000;
$dropdown-button-content-z-index: 5;

.agent-status {
  position: relative;
  text-decoration: none;
  color: $link-color;
  display: block;

  @include icon-after($type: $fa-var-caret-down, $color: $icon-color);

  &::after {
    font-size: 10px;
  }
}

.build-details {
  position: absolute;
  display: none;
  background: $white;
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid $border-color;
  border-radius: 3px;
  z-index: $build-details-z-index;

  &.show {
    display: block;
  }
}

.build-details li {
  border-bottom: 1px dotted $border-color;
  padding: 4px 10px;
}

.build-details a {
  text-decoration: none;
  color: $link-color;
}

.hostname {
  a {
    text-decoration: none;
    color: $link-color;
  }
}

.agent-checkbox {
  margin: 0;
  padding: 0;

  input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin-top: -5px;
  }
}

.agents-table {
  padding: 0;

  table {
    height: 100%;
  }

  table tbody tr {
    height: 30px;
  }

  table tbody td {
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    height: inherit;
  }

  table tbody .table-cell {
    padding: 10px;
    height: inherit;
    line-height: 100%;
    overflow: hidden;
    overflow-wrap: break-word;
  }
}

.building {
  background: $building-bg-color;
}

.disabled-agent {
  color: $disabled-text-color;
  font-style: italic;
}

.header-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;

  ul li label {
    font-size: 14px;
  }

  .count {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-top: -2px;
  }

  .enabled {
    color: $enable-count-bg-color;
  }

  .disabled {
    color: $disable-count-bg-color;
  }

  .left-container {
    display: flex;
    align-items: center;
  }

  .left-container ul {
    margin-left: 20px;
  }
}

.dropdown-content {
  background: $white;
  position: absolute;
  border-radius: $global-border-radius;
  padding: 20px;
  box-shadow: 0 2px 4px $box-shadow-color;
  width: 250px;
  right: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: $dropdown-button-content-z-index;

  li {
    margin-bottom: 10px;
    border-bottom: 1px dotted $border-color;

    div {
      margin-bottom: 0;
    }
  }
}

.dropdown-content-footer {
  align-self: flex-start;
}

.quick-add li {
  border-bottom: none;
}

.agent-analytics a {
  padding: 0;
  font-size: 14px;
  color: $icon-color;
  cursor: pointer;

  @include icon-before($type: $fa-var-chart-bar);

  &:hover {
    color: $icon-hover-color;
  }
}

.environment-info {
  display: flex;
  justify-content: space-between;

  > div {
    margin-bottom: 0;
  }
}
